<template>
  <div class="container">
    <van-notice-bar
      text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
      :left-icon="noticeIcon"
    />

    <div class="block-title">选择提现方式：</div>
    <van-radio-group
      v-model="paymode"
      class="paymode"
    >
      <van-cell-group>
        <van-cell
          v-for="(item,index) in list"
          clickable
          :key="index"
          :icon="item.icon"
          :label="item.desc"
          :title="item.name"
          @click="paymode = item.id"
        >
          <van-radio
            :name="item.id"
            ref="radio"
          />
        </van-cell>
      </van-cell-group>
    </van-radio-group>

    <div class="block-title">设置提现金额：</div>
    <van-panel
      title="提现金额"
      class="withdraw"
    >
      <van-field
        v-model="amount"
        type="number"
        label="￥"
        autofocus
      />
      <template slot="footer">
        <div>可用提现金额 {{withdrawAmount}} 元</div>
        <van-button
          size="small"
          plain
          type="default"
          @click="onWithdrawAll"
        >全部提现</van-button>
      </template>
    </van-panel>

    <div class="btn-actions">
      <van-button
        round
        block
        type="blue"
        @click="onSubmit"
      >预计两天到账，确认提现</van-button>
    </div>

  </div>
</template>

<script>
import {
  NoticeBar,
  Popup,
  NumberKeyboard,
  Field,
  RadioGroup,
  Radio,
  Panel,
  Row,
  Col,
  Icon,
  Button,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  Card,
  Lazyload
} from 'vant'
export default {
  components: {
    [NoticeBar.name]: NoticeBar,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [NumberKeyboard.name]: NumberKeyboard,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Panel.name]: Panel,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Card.name]: Card,
    Lazyload
  },

  data () {
    return {
      show: true,
      amount: null,
      noticeIcon: '../../static/notice.png',
      withdrawAmount: 286.80,
      paymode: 2,
      list: [
        {
          id: 1,
          name: '微信支付',
          desc: '亿万用户的选择，更快更安全',
          icon: 'wechat'
        },
        {
          id: 2,
          name: '支付宝',
          desc: '亿万用户的选择，更快更安全',
          icon: 'alipay'
        }
      ]
    }
  },

  created () {},

  computed: {
    withdrawAmounts () {
      return this.amount
    }
  },
  watch: {
    amount: {
      handler (curVal, oldVal) {
        if (curVal) {
          curVal = curVal.toString()
          curVal = curVal.match(/^\d*(\.?\d{0,2})/g)[0] || null
        }

        if (Number(curVal) > Number(this.withdrawAmount)) {
          this.amount = this.withdrawAmount
        } else {
          this.amount = curVal
        }
      },
      deep: true
    },
    chosenAddressId: {
      handler (curVal, oldVal) {
        this.reckonExpress(curVal)
      },
      deep: true
    }
  },
  methods: {
    onSubmit () {
      this.$toast('点击结算' + this.amount)
    },
    onWithdrawAll () {
      this.amount = this.withdrawAmount
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// @import "../../assets/less/temp.less";
.withdraw {
  /deep/ [class*="van-hairline"]::after {
    display: none;
  }
  /deep/ .van-field {
    .van-cell__title {
      font-size: 14px;
      max-width: 20px;
    }
    .van-cell__value {
      font-size: 30px;
    }
  }
  /deep/ .van-panel__footer {
    -moz-box-align: center;
    -moz-box-pack: justify;
    align-items: center;
    align-content: space-around;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
  }
}
</style>
